import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app = createApp(App)


app.config.errorHandler = (err, instance, info) => {
  // 处理错误 
  console.error(err, instance, info)
}

app.config.warnHandler = (msg, instance, trace) => {
  // `trace` 是组件层级结构的追踪
  console.error(msg, instance, trace)
}
app.config.performance=true

// 注册 https://blog.csdn.net/super_ying123/article/details/124285101
app.directive('click-outside', {
    // 指令具有一组生命周期钩子：
    // 在绑定元素的 attribute 或事件监听器被应用之前调用
    created() {},
    // 在绑定元素的父组件挂载之前调用
    beforeMount() {},
    // 在绑定元素的父组件挂载之后调用
    mounted(el,binding) {
        function eventHandler(e: Event) {
            // console.log(el.contains(e.target),el,e.target) // display:none 
            if (el.contains(e.target)) {
                
                return false
            }
            // 如果绑定的参数是函数，正常情况也应该是函数，执行
            if (binding.value && typeof binding.value === 'function') {
                binding.value(e)
            }
        }
        // 用于销毁前注销事件监听
        el.__click_outside__ = eventHandler
        // 添加事件监听
        document.addEventListener('click', eventHandler)
    },
    // 在包含组件的 VNode 更新之前调用
    beforeUpdate() {},
    // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
    updated() {},
    // 在绑定元素的父组件卸载之前调用
    beforeUnmount(el) {
          // 移除事件监听
          document.removeEventListener('click', el.__click_outside__)
          // 删除无用属性
          delete el.__click_outside__
    },
    // 在绑定元素的父组件卸载之后调用
    unmounted() {}
  })
 
app.mount('#app')
